
<script type="text/javascript">
    $(document).ready(function(){
        // Change this to the location of your server-side upload handler:
        var url = window.location.hostname === 'blueimp.github.io' ?
        '//jquery-file-upload.appspot.com/' : '~upload/upload';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            add: function(e, data){
                $('.process_bar div').css('width','0%');
                $('.process_bar').css('display','block');
                data.submit();
            },
            done: function (e, data) {
                $('.process_bar').fadeOut(2000);
                var image = data.files[0].name;
                var img = $('<img/>');
                img.attr("src", $('#path').val() + '/upload/' + image).load(function () {
                    $sHtml = '<div class="image_item" val="' + image + '"><img class="not_show" src="' + $('#path').val() + '/upload/' + image + '" ></div>';
                    $('.image_block_content').append($sHtml);
                });
                var productUri = $('#current_product_uri').val();
                $.post('~product/addImage',{productUri : productUri , image : image},function(data){                  
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('.process_bar div').css('width',progress + '%');
            }
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

        // Script for ImageBlock
        $('.image_block_content').on('click','div',function(){
            $(this).closest('.image_block_content').find('div').removeClass('select_image'); 
            $(this).addClass('select_image');
            $('.image_tool').css('right','0px');
        }); 

        $(document).on('click','.hide_image_tool',function(){
            if($('.image_tool').css('right') == '-200px'){
                $('.image_tool').css('right','0px');
            }
            else{
                $('.image_tool').css('right','-200px');
            }
        });
        $('#bt_set_default_image').click(function(){
            var productUri = $('#current_product_uri').val();
            var image = $('.select_image').attr('val');
            $.post('~product/setDefaultImage',{productUri : productUri , image : image},function(data){
                if(data.indexOf('OK') != -1)
                {
                    $('.image_block_content .image_item').removeClass('default_image');
                    $('.select_image').addClass('default_image');
                    $.alertBox('Message','Thay đổi hình đại diện thành công!');
                }
            });
        });
        
        $('#bt_set_hot_image').click(function(){
            var productUri = $('#current_product_uri').val();
            var image = $('.select_image').attr('val');
            $.post('~product/setHotImage',{productUri : productUri , image : image},function(data){
                alert(data);
            });
        });
        
        $('#bt_set_highlight_image').click(function(){
            var productUri = $('#current_product_uri').val();
            var image = $('.select_image').attr('val');
            $.post('~product/setHighLightImage',{productUri : productUri , image : image},function(data){
                alert(data);
            });
        });
        
        $('#bt_delete_image').click(function(){
            var uri = $('#current_product_uri').val();
            var image = $('.select_image').attr('val');
            $.post('~product/removeImage',{uri : uri , image : image},function(data){
                if(data.indexOf('FALSE') == -1){
                    $('.select_image').remove();
                    $.alertBox('Message','Xóa thành công!');
                }
            });
        });
    });
</script>

<!-- The global progress bar -->
<div class="image_block_swap">
    <div class="process_bar">
        <div></div>
    </div>

    <input id="current_product_uri" type="hidden" value="<?php echo $template->get('uri'); ?>">

    <div class="image_block_content">
        <?php
            if($template->get('aImages')){
                foreach($template->get('aImages') as $aImage){
                    $defaultImage = (isset($aImage['defaultImage']) ? $aImage['defaultImage'] : '');    
                    $hotImage = (isset($aImage['hotImage']) ? $aImage['hotImage'] : '');    
                    $highLightImage = (isset($aImage['hightLightImage']) ? $aImage['hightLightImage'] : '');  
                    $sClass = '';
                    if($aImage['image'] == $defaultImage)
                    {
                        $sClass = 'default_image';
                    }
                    else if($aImage['image'] == $hotImage)
                    {
                        $sClass = 'hot_image';
                    }
                     else if($aImage['image'] == $highLightImage)
                    {
                        $sClass = 'highlight_image';
                    }
                ?>
                <div class="image_item <?php echo $sClass; ?>" val="<?php echo $aImage['image'] ?>">
                    <img class="not_show" src="<?php echo URL::getLink('upload/'.$aImage['image']); ?>" >
                </div>
                <?php }}?>
    </div>

    <ul class="image_tool">
        <li class="hide_image_tool"></li>
        <li id="bt_delete_image">Delete image</li>
        <li class="upload_image">Add image<input id="fileupload" type="file" name="files[]" multiple ></li>
        <li id="bt_set_hot_image">Set hot image</li>
        <li id="bt_set_highlight_image">Set hightlight image</li>
        <li id="bt_set_default_image">Set default image</li>
    </ul>
</div>

